<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>酒店订单</title>
    <!-- custom-theme -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Room Booking Form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- //custom-theme -->
    <!--日历css,js-->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/daterangepicker-bs3.css}" />
    <script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/js/moment.js}"></script>
    <script type="text/javascript" th:src="@{/js/daterangepicker.js}"></script>
    <!-- js -->

    <!-- //js -->
    <!-- font-awesome-icons -->
    <link th:href="@{/th:css/f@{/ont-awesome.css" rel="sty}lesheet">
    <!-- //font-awesome-icons -->
    <link th:href="@{/th:css/f@{/ormstyle.css" rel="styles}heet" type="text/css" media="all" />
</head>
<body>
<div class="main">
    <h1>酒店订单界面</h1>
    <div class="w3_agile_main_grids">

        <div id='progress'><div id='progress-complete'></div></div>

        <form id="SignupForm" action="#" class="agile_form"method="post">
            <fieldset>
                <h3>客户信息</h3>
                <div class="form-group agileits_w3layouts_form w3_agileits_margin">
                    <div class="wthree_input">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        <input id="Name" type="text" name="Name" class="form-control" placeholder="姓名" required="" />
                    </div>
                </div>
                <div class="form-group agileits_w3layouts_form">
                    <div class="wthree_input">
                        <i class="fa fa-key" aria-hidden="true"></i>
                        <input id="Password" type="password" name="Password" class="form-control" placeholder="密码" required="" />
                    </div>
                </div>
                <div class="form-group agileits_w3layouts_form">
                    <div class="wthree_input">
                        <i class="fa fa-fw fa-phone" aria-hidden="true"></i>
                        <input id="Phone" type="text" name="Phone" class="form-control" placeholder="电话" required="" />
                    </div>
                </div>
                <div class="clear"> </div>
            </fieldset>

            <fieldset>
                <h3>房间类型</h3>
                <h4 class="w3layouts_type">请选择房间类型</h4>
                <div class="form-group agileits_circles">
                    <div class="wthree_radio">
                        <span class="fa fa-user" aria-hidden="true"></span>
                        <label class="radio">
                            <input type="radio" name="radio" checked="">
                            <i></i>单间
                        </label>
                    </div>
                </div>
                <div class="form-group agileits_circles">
                    <div class="wthree_radio">
                        <span class="fa  fa-venus-mars" aria-hidden="true"></span>
                        <label class="radio">
                            <input type="radio" name="radio">
                            <i></i>双人间（标间）
                        </label>
                    </div>
                </div>
                <div class="form-group agileits_circles">
                    <div class="wthree_radio">
                        <span class="fa fa-users" aria-hidden="true"></span>
                        <label class="radio">
                            <input type="radio" name="radio">
                            <i></i>三人间（亲子间）
                        </label>
                    </div>
                </div>
                <div class="clear"> </div>
            </fieldset>

            <fieldset>
                <h3 class="w3_room">日期选择</h3>
                <div id="reportrange2" class="btn" style="display: inline-block; background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                    <span></span> <b class="caret"></b>
                </div>

            </fieldset>

            <p>
                <button id="SaveAccount" class="btn btn-primary agileinfo_primary submit">Submit form</button>
            </p>
        </form>

        <div class="agileits_copyright">
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/jquery.formtowizard.js}"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#reportrange2 span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
        $('#reportrange2').daterangepicker();
    });
</script>
<script>
    $( function() {
        var $signupForm = $( '#SignupForm' );

        $signupForm.validate({errorElement: 'em'});

        $signupForm.formToWizard({
            submitButton: 'SaveAccount',
            nextBtnClass: 'btn btn-primary next',
            prevBtnClass: 'btn btn-default prev',
            buttonTag:    'button',
            validateBeforeNext: function(form, step) {
                var stepIsValid = true;
                var validator = form.validate();
                $(':input', step).each( function(index) {
                    var xy = validator.element(this);
                    stepIsValid = stepIsValid && (typeof xy == 'undefined' || xy);
                });
                return stepIsValid;
            },
            progress: function (i, count) {
                $('#progress-complete').width(''+(i/count*100)+'%');
            }
        });
    });
</script>
</body>
</html>